<template>
  <div>
    <div class="hehe">
      <div class="search-container">
        <input
          ref="queryInput"
          type="text"
          class="search-input"
          placeholder="搜索..."
          v-model="searchQuery"
          @keyup.enter="search"
        >
        <button
          class="search-button"
          @click="search"
        ><i class="search-icon">🔍</i></button>
      </div>
      <el-button
        type="primary"
        v-show="currentUser"
        @click="postVideo"
      >发布视频</el-button>
      <div
        class="user"
        @click="loginOrMycenter"
      >
        <img
          src="@/assets/logo.png"
          alt=""
        >
      </div>
    </div>

  </div>

</template>

<script>
export default {
  name: "search",
  data() {
    return {
      searchQuery: "",
      // TODO：默认false
      currentUser: true,
    };
  },
  mounted() {
    const token = localStorage.getItem("token");
    if (token) {
      this.currentUser = true;
    }
  },
  methods: {
    search() {
      this.$refs.queryInput.blur();
      console.log("搜索: " + this.searchQuery);
      //   TODO：搜索请求，路由跳转
    },
    loginOrMycenter() {
      const token = localStorage.getItem("token");
      if (token) {
        this.$router.push("/myCenter");
      } else {
        this.$router.push("/login");
      }
    },
    postVideo() {
      this.$router.push("/video-upload");
    },
  },
};
</script>

<style scoped>
.hehe {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search-container {
  margin: 0 auto;
  float: left;
  display: flex;
  align-items: center;
  border-radius: 20px;
  border: 1px solid #ccc;
  /* margin: 15px 20px; */
  padding: 5px 10px;
  width: 30%;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 5px;
  background-color: transparent;
}

.search-button {
  background-color: #2b85e6;
  border: none;
  border-radius: 0 20px 20px 0;
  color: white;
  cursor: pointer;
  padding: 5px 10px;
}

.search-icon {
  font-size: 15px;
}

.user {
  width: 50px;
  height: 100%;
  margin-left: auto;
  margin-right: 10px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
}

.user img {
  width: 100%;
}
</style>